<template>
  <div class="home">
    <div class="top"><span>智慧宿管云平台</span></div>
    <van-button class="btn" type="info">开闸</van-button>
    <van-cell-group v-for="item in listDorAttence" :key="item.id">
        <van-cell :title="item.roomName" :value="'宿舍总人数：'+item.total" />
        <van-cell title-class="cell">
          <template #default>
            <van-badge :content="item.normal" color="#67c23a">
              <div class="child">正常</div>
            </van-badge>
            <van-badge :content="item.leaveCount" color="#409eff">
               <div class="child">请假</div>
            </van-badge>
            <van-badge :content="item.comebacklate" color="#e6a23c">
               <div class="child">晚归</div>
            </van-badge>
            <van-badge :content="item.absence" color="#f56c6c">
               <div class="child">缺勤</div>
            </van-badge>
          </template>
        </van-cell>
      </van-cell-group>
  </div>
</template>

<script>

export default {
  name: 'home',
  components: {
  },
  data(){
    return{
      listDorAttence:[]
    }
  },
  methods:{
    async getUSer(){
      var {data:res} =await this.request({
        url:this.$location.listDorAttence
      })
      this.listDorAttence=res.data
      console.log(this.listDorAttence)
    }
  },
  created(){
    this.getUSer();
  }
}
</script>
<style lang="less">
.top {
    height:  200px;
    background: url(../assets/3.png) no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    overflow: auto;
    padding-top: 10%;
    span {
    top: 0;
    height: 100px;
    line-height: 100px;
    // text-align: center;
    margin-left: 34%;
    color: #fff;
    font-size: 22px;
  }
}
.btn{
    margin-left: 40% !important;
    padding: 0 25px !important;
  }
.child {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    padding: 9px 15px;
  }
  .van-badge__wrapper {
    margin-right: 15px;
  }
  .van-cell__value {
    overflow: visible !important; 
}
.home .van-cell::after {
    border-bottom:0 !important;
}
.home .van-cell__value {
    width: 200px !important;
}
.home .van-cell__value {
     text-align: left;
}
.home .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
    border-width: 1px !important;
    width: 519px !important;
}
.home .van-cell__value {
    text-align: left !important;
}
.home .van-cell {
    position: relative;
    display:inline-block; 
    /* display: -webkit-flex; */
    /* display: flex; */
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}
.home .van-cell-group {
    margin: 20px 10px !important;
}
.home .van-badge__wrapper {
    margin-bottom: 10px;
}
</style>